<template>
	<view class="container"
		style="background-image: url('https://mmbiz.qpic.cn/mmbiz_jpg/Qs5ZVics1SyC55icCiaZnDq5fZ5icBbib3ytynEj8xHOmSsuib3czF1OjSXphIZfrnBlcBCBicU0D0Lb3YJ5dMKXTgwJg/640?wx_fmt=jpeg&amp;from=appmsg');background-size: 100% 100%;">
		<backbtn />
		<uni-transition mode-class='slide-left' :show="scene === 0">
			<div class="center" style="height: 100vh;width: 100vw;">
				<!-- 字 -->
				<img src="https://mmbiz.qpic.cn/mmbiz_png/Qs5ZVics1SyC55icCiaZnDq5fZ5icBbib3yty2ZaRGsiciazzbYFS6RkBL34RicgQ4iaEic8NgAnBWUIkfAE2AKHibTEju3Gg/640?wx_fmt=png&amp;from=appmsg"
					class="train animated infinite fadeInLeft"
					style="animation-duration: 6s;width: 20vw!important;height: 30vh!important;position: absolute;top:40vw;left: 10vw;" />

			</div>
		</uni-transition>
		<div class="center" style="height: 70vh;position: relative;left: 0rpx;">
			<music :music="musicSrc" />
			<z-swiper v-model="list" :options="optionsAutoplay">
				<z-swiper-item :custom-style="{width:'80vw'}" v-for="(item,index) in list" :key="index">
					<img :src="item" alt="" mode="widthFix" @click="previewImage(item)">
				</z-swiper-item>
			</z-swiper>
		</div>
		<div class="foreground" :style="{backgroundImage:'url('+foreground+')'}">
			<!-- 图1 -->
			<img src="https://mmbiz.qpic.cn/mmbiz_png/Qs5ZVics1SyC55icCiaZnDq5fZ5icBbib3ytyc3TlmLlyBRHtyrprdLso9Fw9zXLlpDGIayG0iaqJkxoVHwh3jRAdibWA/640?wx_fmt=png&amp;from=appmsg"
				class="lipao animated infinite flash"
				style="animation-duration: 6s;width: 100vw;height: 100vh;position: absolute;top: 0vw;" />
			<!-- 图2 -->
			<img src="https://mmbiz.qpic.cn/mmbiz_png/Qs5ZVics1SyC55icCiaZnDq5fZ5icBbib3ytyhh8iclSl63h8dkHY2VnGRPLUTElIEOcBAjJu7BaUpkjnicZTTkKwdD3g/640?wx_fmt=png&amp;from=appmsg"
				class=" animated infinite headShake"
				style="animation-duration: 6s;width: 50vw;height: 40vh;margin-top:0vh; position:absolute;bottom: 0vw;right: -5vw;" />
		</div>
		<footerPart :detail='detail' />
	</view>
</template>
<script>
	import temp from './temp.json'
	import backbtn from '@/components/backbtn.vue'
	import music from '@/components/music.vue'
	import footerPart from '@/components/footer.vue'
	const type = 'moon3';
	const title = '月满中秋';
	const sceneVal = 1; // 1 is default
	export default {
		name: 'moon1',
		components: {
			backbtn,
			music,
			footerPart
		},
		data() {
			return {
				show: false,
				index: 0,
				scene: 0, //0 is default 1 is show picture
				backthumb: '',
				foreground: '',
				isplaying: true,
				musicSrc: 'https://res.wx.qq.com/voice/getvoice?mediaid=Mzg5OTg3NzY3NV8xMDAwMDAwOTY=',
				optionsAutoplay: {
					centeredSlides: true,
					slidesPerView: 'auto',
					speed: 1000,
					// effect: 'cards',
					// cubeEffect: {
					// 	shadow: true,
					// 	slideShadows: true,
					// 	shadowOffset: 20,
					// 	shadowScale: 0.94,
					// },
					effect: 'creative',
					creativeEffect: {
						prev: {
							shadow: true,
							translate: ['-125%', 0, -800],
							rotate: [0, 0, -90],
						},
						next: {
							shadow: true,
							translate: ['125%', 0, -800],
							rotate: [0, 0, 90]
						}
					},
					autoplay: true
				},
				list: [
					'http://mmbiz.qpic.cn/sz_mmbiz_jpg/WXQibJTp7BTBcSo08tsctVNgOTlhI2JPehBy95WUY9luTdIyYwA0HV2kWlRNHBvfDw4apn0ibAGVUIPzDhjSbk0Q/0?wx_fmt=jpeg'
				],
				ano: '',
				options: {},
				detail: {
					templateid: 3,
					ano: '',
					ablums: [],
				},
			}
		},
		onReady() {
			uni.hideTabBar();
		},
		onLoad(options) {
			const that = this;
			this.getalbum(options);
			this.options = options;
			setTimeout(() => {
				that.scene = sceneVal;
			}, 6000);
		},
		methods: {
			getalbum(options) {
				const that = this;
				const data = {
					'templateid': options.templateid,
					'appid': this.$apis.appId,
					'showano': options.showano, //
					'ano': options.ano
				};
				this.$apis.getalbum(data).then(res => {
					that.list = res.ablums;
					that.detail = res;
					that.detail.type = type;
					wx.hideLoading();
				})
			},
			previewImage(url) {
				// 使用uni的预览图片接口
				uni.previewImage({
					current: 0, // 当前显示图片索引
					urls: [url], // 需要预览的图片http链接列表
				});
			},
		},
		onShareAppMessage: function() {
			console.log('detail', this.detail);
			const sharepath =
				'/pages/album/' + type +
				'?templateid=' + this.detail.templateid +
				'&showano=' + this.options.showano +
				'&ano=' + this.detail.ano + '&type=' + type;
			console.log('sharepath', sharepath);
			return {
				title: title,
				path: sharepath,
				imageUrl: this.detail.ablums[0],
				success: function(res) {
					// 转发成功
				},
			}
		},
	}
</script>

<style lang="scss" scoped>
	@import "@/static/css/animate.min.css";
	@import "album.scss"
</style>